<template>
	<div class="pb20">
		<!-- DD订单  PR回款 -->
		<div style="position: relative;z-index: 1;">
			<view v-if="isEdit == 'R' && showType == 'DD'">
				<orderDetail :orderNo="orderNo"></orderDetail>
			</view>
			<view v-else-if="isEdit == 'E' && showType == 'DD'">
				<operateOrder ref="childComponent" :isCommissionRatio="isCommissionRatio" @refreshList="getList()"></operateOrder>
			</view>
			<view v-if="isEdit == 'R' && showType == 'PR'">
				<receivedDetail :orderNo="orderNo"></receivedDetail>
			</view>
			<view v-else-if="isEdit == 'E' && showType == 'PR'">
				<operateReceived ref="childComponent" :type="1" :id="orderNo" @refreshList="getList()"></operateReceived>
			</view>
			<view v-if="isEdit == 'R' && showType == 'RE'">
				<refundDetail :orderNo="orderNo"></refundDetail>
			</view>
			<view v-else-if="isEdit == 'E' && showType == 'RE'">
				<operateRefund ref="childComponent" :type="1" :id="orderNo" @refreshList="getList()"></operateRefund>
			</view>
		</div>
		<!-- 毛利率 业务单号  原文件循环form 
		style="opacity: 0;position: absolute;top: 0;z-index: 0;"v-show="isFormShow == 'isFormShow'"
		-->
		<div style="background-color: #FAF9F9;padding:20px;border-radius: 8px;display: none;" >
			<el-form label-position="top" :rules="rules" :model="formValue" ref="ruleFormRef">
				<template v-for="(item, index) in formList">
					<el-form-item v-if="isShow(item)"
						:label="(item.name + (item.props.unit ? '(' + item.props.unit + ')' : ''))"
						:prop="!item ? '' : item.id" :required="!item ? false : item.required" style="margin-bottom: 20px;">
						<component style="width: 100%" :formValue="formValue" :is="getFormWidget(item.type)"
							:index="props.index >= 0 ? props.index : -1" mode="RUN" :ref="'form' + item.id"
							:formIndex="index" :form="item"></component>
					</el-form-item>
				</template>
			</el-form>
		</div>
	</div>
</template>

<script setup lang="ts">
//查看订单详情
import orderDetail from '@/views/business/order/components/orderDetailPop.vue'
//编辑订单
import operateOrder from '@/views/business/order/components/operateOrder.vue'
//回款详情
import receivedDetail from '@/views/business/received/detail.vue'
//回款编辑
import operateReceived from '@/views/business/received/components/index.vue'
//退款详情
import refundDetail from '@/views/business/afterSales/refundDetail.vue'
//退款编辑
import operateRefund from '@/views/business/afterSales/components/refundPop.vue'

import { onMounted, reactive, ref, computed, getCurrentInstance, watch } from 'vue'
import type { FormRules } from 'element-plus'
import { useFlowStore } from "../../../stores/flow";
import getFormName from "../../../utils/getFormWidget";
import { assiginObj, getFormValue, getFormRuleConfig, deepCopy } from "../../../utils/objutil";

const ruleFormRef = ref();
const rules = reactive<FormRules>({})
const isEdit = ref(false)
const getFormWidget = (name: string) => {
	//写的时候，组件的起名一定要与dragList中的element名字一模一样，不然会映射不上
	return getFormName[name];
};

let props = defineProps({
	index: {
		type: Number,
		default: -1
	},
	formList: {
		type: Array, default: () => []
	},
	formChangeRecord: {
		type: Object, default: () => { }
	}
});
const isFormShow = ref(false)
const isCommissionRatio = ref(false) //是否客编辑提成比率
const orderNo = ref();
const showType = ref()
const childComponent = ref<typeof operateOrder | null>(null);
const handleFormRule = (n) => {
	let formList = n
	if (!n) {
		formList = props.formList;
		
	}
	
	for (var item of formList) {
		let id = item.id;
		let validateRule = getFormRuleConfig(item);
		rules[id] = validateRule;
	}
	// E显示编辑 R显示详情
	for(let key in formList){
		// DD订单
		if(formList[key].name == '业务单号'){
			showType.value = formList[key].props.value.substring(0, 2)
			orderNo.value = formList[key].props.value
		}
		if(formList[key].name == '说明'){
			isEdit.value = formList[key].perm
			if(isEdit.value == 'E'){
				setTimeout(()=>{
					if (childComponent.value) {
						childComponent.value.open(orderNo.value)
					}
				},200)
			}
		}
		if(formList[key].name == '是否可以编辑商品提成'){
			isCommissionRatio.value = formList[key].placeholder
		}
		if(formList[key].name == '是否显示表单数据'){
			isFormShow.value = formList[key].placeholder
		}
	}
}

const validate = (f) => {
	ruleFormRef.value.validate((valid) => {
		f(valid);
	})
}

//获取表单值
function getFormValueObj(v) {
	return getFormValue(v)
}

const formValue = computed(() => {
	return getFormValue(props.formList);
})


let flowStore = useFlowStore();
watch(() => formValue.value, (v) => {
	if (props.index < 0) {
		flowStore.setFormValue(v)
	}
})

function isShow(item) {
	if (item.perm === 'H') {
		return false;
	}
	if (item.perm === 'E') {
		return true;
	}
	// return !item.props.isBlank;
	return true;
}

defineExpose({ validate, handleFormRule, getFormValueObj });
onMounted(() => {
	handleFormRule(props.formList);
})
</script>

<style scoped lang="less"></style>